<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-html,v-cloak,v-once,v-pre指令</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-html 指令：
            作用：想指定结点中渲染包含 html 结构的内容
            与插值语法的区别
                v-html 会替换掉结点中所有的内容，{{xx}} 则不会；
                v-html 可以识别 html 结构。
            严重注意：v-html 有安全性问题
                在网站上动态渲染任意 HTML 是非常危险的，容易导致 xss 攻击；
                一定要在可信的内容是哪个使用 v-html，永远不要在用户提交的内容上使用。
        v-cloak 指令：
            本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性；
            使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。
        v-once 指令：
            v-once 所在结点在初次动态渲染后，就视为静态内容了；
            以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。
        v-pre 指令：
            跳出其所在的结点的编译过程；
            可利用它跳过没有使用指令语法、没有使用插值语法的结点，会加快编译。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>{{name}}</h1>
        <h1 v-html="str"></h1>
        <h1 v-once>初始化的 n 的值为： {{n}}</h1>
        <h1>当前的 n 的值为： {{n}}</h1>
        <button @click="n ++">点我让 n + 1</button>
        <h1 v-pre>Vue 其实很简单</h1> 
        <h1 v-pre>初始化的 n 的值为： {{n}}</h1>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'张三',
            str:'<h1>你好啊</h1>',
            n: 1
        }
    })
</script>
</html>